<template>
  <div>
    <input type="text" v-model="name" placeholder="请输入名字">
    <h1>列表中第一位是：{{ firstPerson }}</h1>
    <button @click="add">添加</button>
    <button @click="addWang">添加姓王的人</button>
    <ul>
        <li v-for="person in PersonList" :key="person.id">{{person.name}}</li>
    </ul>
  </div>
</template>

<script>
import {nanoid} from 'nanoid'
import {mapMutations, mapState} from 'vuex'
export default {
name: 'PersonTest',
data() {
    return {
        name: '',
    }
},
computed:{
    ...mapState('personAbout',['PersonList']),
    firstPerson(){
        return this.$store.getters['personAbout/firstPersonName']
    }
},
methods:{
    ...mapMutations('personAbout',['ADDPERSON']),
    add(){
        const personobj={id:nanoid(),name:this.name}
        this.ADDPERSON(personobj)
        this.name=''
    },
    addWang(){
        const personobj={id:nanoid(),name:this.name}
        this.$store.dispatch('personAbout/addPersonWang',personobj)
        this.name=''
    }
}
}
</script>

<style>

</style>